<template>
<div v-for ="item in my_articles.articles" class="article-preview">
          <div class="article-meta">
            <a href="/profile/eric-simons"><img :src="item.author.image" /></a>
            <div class="info">
              <a href="/profile/eric-simons" class="author">{{item.author.username}}</a>
              <span class="date">{{item.author.bio}}</span>
            </div>
            <button class="btn btn-outline-primary btn-sm pull-xs-right">
              <i class="ion-heart"></i> {{item.favoritesCount}}
            </button>
          </div>
          <RouterLink :to="{name:'article', params:{article_id:item.slug}}" class="preview-link">
            <h1>{{item.title}}</h1>
            <p>{{item.description}}</p>
            <span>Read more...</span>
            <ul class="tag-list">
              <li v-for="tag in item.tagList"  class="tag-default tag-pill tag-outline">{{ tag }}</li>
            </ul>
          </RouterLink>
        </div>
</template>
<script setup lang="ts">
import { getArticles } from '@/api';
import { ref } from 'vue';
import { Articles } from '@/model';
import { RouterLink } from 'vue-router';


const my_articles = ref<Articles>({articles:[],articlesCount: 0});
getArticles().then(res=>{
  my_articles.value = res.data
})
</script>
<style scoped>
</style>
